<template>
  <div class="wrapper">
    <div class="btn-add">
      <van-uploader style="height: 100%;width: 100%" class="center" :after-read="onRead">
        <div class="flex-c">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dd_pj"></use>
          </svg>
          <span v-text="getTxt"></span>
        </div>
      </van-uploader>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Public from '@/assets/js/public';

  export default {
    /** kebab-case */
    name: 'btn-add-img',

    data() {
      return {};
    },
    /** 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
     String/Number/Boolean/Function/Object/Array/Symbol */
    props: {
      maxNum: {
        required: true,
        type: Number,
        default: -1
      }
    },

    components: {},

    methods: {
      getIcon(icon) {
        return Public.ossImg + icon + '.svg';
      },
      onRead(file) {
        this.$emit('getPic', file.content);
      }
    },
    computed: {
      getTxt() {
        if (this.maxNum > 0) {
          return '最多选' + this.maxNum + '张';
        } else {
          return '';
        }
      }
    },
    watch: {
      // 监听具体数据变化，并做相应的处理
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()

  .btn-add
    width 100%
    height 100%
    border 1px dashed third-ash
    word-vw(10, third-ash)
    flex-y()
    border-radius vw(8)

  .icon
    margin-bottom 1vw
    width vw(24)
    height vw(24)
</style>
